<template>
  <div class="operator-box">
    <div class="title">{{ defaultTagName + $t('reportTool.report') }}</div>
    <span class="reset">{{ $t('reportTool.title.condition') }}<a-icon type="undo"></a-icon></span>
    <div class="filter-params-box">
      <div class="filter-params-item" v-for="(item, index) in filterData" :key="index">
        <span>{{item.name}}：</span>
        <a-month-picker v-if="item.formType === 'DateMonth'" style="width: 100%" v-model="item.value" :locale="locale" valueFormat="YYYY/MM"></a-month-picker>
        <a-date-picker  v-if="item.formType === 'Date'"      style="width: 100%" v-model="item.value" :locale="locale" valueFormat="YYYY/MM/DD"></a-date-picker>
        <a-date-picker 
        mode="year"
        :open="isOpen"        
        v-if="item.formType === 'DateYear'" 
        style="width: 100%" 
        @focus="focus" 
        @openChange="openChange" 
        @panelChange="panelChange" 
        :value="item.value" 
        :locale="locale" 
        format="YYYY"></a-date-picker>
        <a-range-picker v-if="item.formType === 'DateRange'" style="width: 100%" v-model="item.value" :locale="locale" valueFormat="YYYY/MM/DD"></a-range-picker>
        <a-select
        v-if="item.formType === 'select'"
        :mode="item.multiple ? 'multiple' : 'default'"
        style="width: 100%"
        placeholder="请选择"
        v-model="item.value"
        :allowClear="true"
        @change="changeInst($event,item.name)"
        show-search
        :filter-option="filterOption">
          <template v-if="item.name=='选择部门'">
              <a-select-option v-for="itemRow in deptList" :key="itemRow.groupOid" :value="itemRow.groupOid" >{{itemRow.groupName}}</a-select-option>
          </template>
          <template v-else-if="item.name=='项目大类' && defaultTagName !=='项目全节点'  && defaultTagName !=='项目交付物'">
            <a-select-option v-for="itemRows in subTypeList" :key="itemRows.name" :value="itemRows.name">{{itemRows.displayName}}</a-select-option>
          </template>
          <template v-else-if="item.name=='项目大类' && (defaultTagName =='项目全节点' || defaultTagName =='项目交付物')">
            <a-select-option v-for="itemRows in subTypeList" :key="itemRows.name" :value="itemRows.displayName">{{itemRows.displayName}}</a-select-option>
          </template>
          <template v-else-if="item.name=='项目小类'">
            <a-select-option v-for="(itemRows,index1) in smallTypesList" :key="'info1-'+index1" :value="itemRows">{{itemRows}}</a-select-option>
          </template>
          <template v-else-if="item.name=='重要等级'">
            <a-select-option v-for="(itemRows,index2) in importantGradesList" :key="'info2-'+index2" :value="itemRows">{{itemRows}}</a-select-option>
          </template>
          <template v-else-if="item.name=='项目状态'">
            <a-select-option v-for="(itemRows,index5) in projectStatesList" :key="'info5-'+index5" :value="itemRows.state">{{itemRows.stateDisplay}}</a-select-option>
          </template>
          <template v-else-if="item.name=='变更状态'">
            <a-select-option v-for="(itemRows,index3) in changeStatesList" :key="'info3-'+index3" :value="itemRows.state">{{itemRows.stateDisplay}}</a-select-option>
          </template>
          <template v-else-if="item.name=='变更类型'">
            <a-select-option v-for="(itemRows,index4) in changeTypesList" :key="'info4-'+index4" :value="itemRows.changeType">{{itemRows.changeTypeDisplay}}</a-select-option>
          </template>
          <template v-else-if="item.name=='研究院'">
            <a-select-option v-for="(itemRows,index6) in instByGroup" :key="'info6-'+index6" :value="itemRows">{{itemRows}}</a-select-option>
          </template>
          <template v-else-if="item.name=='事业部'">
            <a-select-option v-for="(itemRows,index7) in partList" :key="'info7-'+index7" :value="index7">{{index7}}</a-select-option>
          </template>
          <template v-else-if="item.name=='指标类别'">
            <a-select-option v-for="itemRows in indexTypesList" :key="itemRows.indexType" :value="itemRows.indexTypeName">{{itemRows.indexTypeName}}</a-select-option>
          </template>
          <template v-else>
            <a-select-option key="泵送事业部" value="泵送事业部">泵送事业部</a-select-option>
          </template>
        </a-select>
        <a-input v-if="item.formType === 'text'" style="width: 100%" placeholder="请输入" :allowClear="true"  v-model="item.value"></a-input>
      </div>
    </div>
    <div class="btn-box">
      <a-button @click="searchRes">{{defaultTagName === '部门月度项目综合' ? $t('reportTool.title.search') : $t('reportTool.title.query')}}</a-button>
      <a-button type="primary" v-if="defaultTagName!=='项目全节点' && defaultTagName!=='项目交付物'" @click="outputData">{{$t('reportTool.title.export')}}</a-button>
    </div>
  </div>
</template>
<script>
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { getSubTypes, getPIProjectsUserGroup, getProjectSmallTypes, getImportantGrades, getProjectStates, getChangeStates, getChangeTypes, getProjectIndexType,getInstituteByGroup,getUndertakingPartList} from './configData'
import moment from 'moment';
let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
export default {
  props: {
    defaultTagName: {
      type: String,
      default: ''
    },
    filterData: {
      type: Array, 
      default: () => []
    },
    lang: {
      type: String,
      default: 'zh'
    }
  },
  data() {
    return {
      strYear:"",
      isOpen:false,
      locale,
      subTypeList:[],//项目大类
      deptList:[],//可选部门
      smallTypesList:[],//项目小类
      importantGradesList:[],//重要等级
      projectStatesList:[],//项目状态
      changeStatesList:[],//变更状态
      changeTypesList:[],//变更类别
      projectTypeName:'',//项目大类
      instByGroup:[],//研究院
      partList:[],//事业部
      indexTypesList:[],//指标类别
    }
  },
  mounted() {
    this._getSubTypes();
    this._getUndertakingPartList();
    this._getPIProjectsUserGroup();
    this._getProjectSmallTypes();
    this._getImportantGrades();
    this._getProjectStates();
    this._getChangeStates();
    this._getChangeTypes();
    this._getProjectIndexType();
  },
  watch:{
    defaultTagName(v1,v2){
      if(v1=='项目综合' || v1=='设计返修'|| v1=='项目变更' || v1=='项目质量'){
        let arrs = []
        arrs = this.filterData.filter(item=>{
          return item.name=='项目大类'
        })
        this.projectTypeName = arrs[0].value || '';
        this._getProjectStates(); //项目状态
        this._getImportantGrades(); //重要等级
      }
    }
  },
  methods: {
    moment,
    searchRes(){
      this.$emit('searchRes',this.filterData,this.partList)
    },
    outputData(){
      this.$emit('outputData',this.filterData)
    },
    focus(e){
      if(e){
        this.isOpen = true
      }else{
        this.isOpen = false
      }
    },
    // 弹出关闭日历的回调
    openChange(e){
      if(e == false){
          this.isOpen = false
      }
    },
    // 弹出关闭日历的回调
    panelChange(er){
      let years = er.format('YYYY')
      if(years){
          this.filterData.forEach(item => {
              if(item.formType === 'DateYear'){
                  item.value = years
              }
          })
          this.isOpen = false
      }
    },
    // 获取事业部
    _getUndertakingPartList(){
        getUndertakingPartList({userId:userInfo.loginName}).then(({data}) => {
        if (data.data && data.data.length) {
          this.partList = [data.data[0].items[0].selects][0]
        }else{
          this.partList = []
        }
      })
    },
    // 获取研究院
    _getInstituteByGroup(groupName){
      getInstituteByGroup({groupName:groupName}).then(({data}) => {
        if (data.data && data.data.length) {
          this.instByGroup = data.data
        }else{
          this.instByGroup = []
        }
      })
    },
    //获取项目大类
    _getSubTypes(){
      getSubTypes({userId: userInfo.loginName, objType:"com.pisx.pmgt.project.PIProject"}).then(({data}) => {
        if (data.data && data.data.length) {
          this.subTypeList = data.data
        }else{
          this.subTypeList = []
        }
      })
    },
    //获取可选部门
    _getPIProjectsUserGroup(){
      getPIProjectsUserGroup({userId: userInfo.loginName}).then(({data}) => {
        if (data.data && data.data.length) {
          this.deptList = data.data
        }else{
          this.deptList = []
        }
      })
    },
    //获取项目小类
    _getProjectSmallTypes(){
      getProjectSmallTypes({userId: userInfo.loginName}).then(({data}) => {
        if (data.data && data.data.length) {
          this.smallTypesList = data.data
        }else{
          this.smallTypesList = []
        }
      })
    },
    //获取项目重要等级
    _getImportantGrades(){
      getImportantGrades({userId: userInfo.loginName,projectTypeName:this.projectTypeName.toString()}).then(({data}) => {
        if (data.data && data.data.length) {
          this.importantGradesList = [...new Set(data.data)]
        }else{
          this.importantGradesList = []
        }
      })
    },
    //获取项目状态
    _getProjectStates(){
      getProjectStates({userId: userInfo.loginName,projectTypeName:this.projectTypeName.toString()}).then(({data}) => {
        if (data.data && data.data.length) {
          let arr = []
          data.data.map(item=>{
            arr.push({
              stateDisplay:item.split('=')[1].split(',')[0],
              state:item.split('=')[2].split('}')[0],
            })
          })
          this.projectStatesList = arr
        }else{
          this.projectStatesList = []
        }
      })
    },
    //获取项目变更状态
    _getChangeStates(){
      getChangeStates({userId: userInfo.loginName}).then(({data}) => {
        if (data.data && data.data.length) {
          let arr = []
          data.data.map(item=>{
            arr.push({
              stateDisplay:item.split('=')[1].split(',')[0],
              state:item.split('=')[2].split('}')[0],
            })
          })
          this.changeStatesList = arr;
        }else{
          this.changeStatesList = []
        }
      })
    },
    //获取项目变更类别
    _getChangeTypes(){
      getChangeTypes({userId: userInfo.loginName}).then(({data}) => {
        if (data.data && data.data.length) {
          let arr = []
          data.data.map(item=>{
            arr.push({
              changeType:item.split('=')[1].split(',')[0],
              changeTypeDisplay:item.split('=')[2].split('}')[0],
            })
          })
          this.changeTypesList = arr
        }else{
          this.changeTypesList = []
        }
      })
    },
    //获取指标类别
    _getProjectIndexType(){
      getProjectIndexType({userId: userInfo.loginName}).then(({data}) => {
        if (data.data && data.data.length) {
          this.indexTypesList = data.data
        }else{
          this.indexTypesList = []
        }
      })
    },
    // 根据获取部门联动研究院
    changeInst(id,name){
      if(name=='项目大类'){
        if(this.defaultTagName=='项目综合'|| this.defaultTagName=='设计返修' || this.defaultTagName=='项目变更' || this.defaultTagName=='项目质量'){
          let arrs = []
          arrs = this.filterData.filter(item=>{
            return item.name=='项目大类'
          })
          this.projectTypeName = arrs[0].value || '';
          this._getProjectStates();
          this._getImportantGrades();
        }
      }else{
        this._getInstituteByGroup(id)
      }
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  }
};
</script>
<style lang="less" scoped>
  .operator-box{
    .title{
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
    .reset{
      font-size: 14px;
      font-weight: bold;
      padding: 16px 0;
      display: block;
      color: #333;
      .anticon{
        margin-left: 5px;
      }
    }
    .filter-params-box {
      display: flex;
      flex-wrap: wrap;
      .filter-params-item {
        display: flex;
        align-items: center;
        width: 50%;
        padding-bottom: 16px;
        span{
          min-width: 100px;
          color: #666;
        }
        &:nth-of-type(2n - 1) {
          padding-right: 15px;;
        }
      }
    }
    .btn-box{
      display: flex;
      align-items: center;
      padding-bottom: 11px;
      .ant-btn{
        margin-right: 10px;
      }
    }
  }
</style>